वेब वर्शन में नया क्या है

Rachel Andrew

पब्लिश किया गया: 20 मई, 2025

Google I/O 2025 में, 'वेब में क्या नया है' मुख्य भाषण में, Baseline के सभी एलान किए गए अपडेट के बारे में बताया गया था. साथ ही, इस साल Baseline में शामिल की गई कुछ सुविधाओं के बारे में भी बताया गया था. यह वेब और Baseline के लिए एक शानदार साल रहा. इस पोस्ट में, हमने इस साल के बारे में बताया है. साथ ही, ज़्यादा जानकारी के लिए सभी लिंक भी दिए हैं.

वेब प्लैटफ़ॉर्म डैशबोर्ड और वेब-सुविधाएं

हमने साल 2024 में, वेब प्लैटफ़ॉर्म डैशबोर्ड के शुरुआती लॉन्च का एलान किया था. यह डैशबोर्ड, वेब-सुविधाओं के डेटा सेट का इस्तेमाल करता है. इससे आपको बेसलाइन की सभी सुविधाओं को एक्सप्लोर करने में मदद मिलती है.

वेब-सुविधाओं का डेटा अब पूरी तरह से तैयार है. इसमें प्लैटफ़ॉर्म की सभी सुविधाओं को मैप किया गया है. हर महीने Baseline में नई सुविधाएं जोड़ी जाती हैं. इससे डेटा अपडेट होता है और यह जानकारी डैशबोर्ड पर दिखती है.

अपना बेसलाइन टारगेट तय करने में मदद करने वाले टूल

ब्राउज़र के लिए सहायता से जुड़ी नीति को, यूनाइटेड किंगडम की एजेंसी Clearleft जैसे ब्राउज़र के लिए, ज़्यादातर ब्राउज़र पर उपलब्ध होने के आधार पर तय किया जा सकता है. हालांकि, बेसलाइन के साल के आधार पर भी कोई तय टारगेट अपनाया जा सकता है. अब आपके पास, वेब-सुविधाओं के डेटा के साथ-साथ अपने उपयोगकर्ता डेटा का इस्तेमाल करके, अपने लिए सबसे अच्छा टारगेट तय करने का विकल्प है.

पिछले साल I/O में, हमने एलान किया था कि RUMvision अपने प्रॉडक्ट में बेसलाइन लागू करेगा. यह इंटिग्रेशन अब लाइव है.

यह आपके आरयूएम डेटा का इस्तेमाल करता है. इससे आपको यह पता लगाने में मदद मिलती है कि ग्लोबल औसत के बजाय, उस डेटा के आधार पर कौनसा बेसलाइन साल अपनाया जाए. इससे यह भी पता चलता है कि आपके लिए, ज़्यादा लोगों के लिए उपलब्ध बेसलाइन कैंपेन सही है या नहीं.

Google Analytics के नए बेसलाइन चेकर की मदद से, अपने Google Analytics डेटा का इस्तेमाल करके यह भी देखा जा सकता है कि आपके कितने प्रतिशत उपयोगकर्ता, हर बेसलाइन टारगेट के साथ काम करते हैं.

ये टूल, बढ़ते हुए टूल के कलेक्शन में से सिर्फ़ दो हैं. इनकी मदद से, उपयोगकर्ता के असल डेटा को बेसलाइन पर मैप किया जा सकता है.

Web DX कम्यूनिटी ग्रुप ने हाल ही में Netlify के लिए एक एक्सटेंशन लॉन्च किया है. यह एक्सटेंशन, अलग-अलग बेसलाइन सालों के लिए सहायता दिखाता है. साथ ही, यह आपकी साइटों पर बड़े पैमाने पर उपलब्ध है. इससे आपको यह तय करने में मदद मिलती है कि आपको अपने बिल्ड टूल में क्या टारगेट करना है. Cloudflare के Observatory RUM प्रॉडक्ट और Contentsquare के साथ इंटिग्रेशन जल्द ही उपलब्ध होंगे.

डेटा को अपने टूल के साथ इंटिग्रेट करना

वेब-सुविधाओं का डेटा, आपके इंटिग्रेशन के लिए उपलब्ध है. हम इसे आसान बनाने की कोशिश कर रहे हैं.

वेब प्लैटफ़ॉर्म डैशबोर्ड एपीआई का इस्तेमाल करें या npm पैकेज से सीधे वेब-सुविधाओं का डेटा पाएं.

अब W3C WebDX कम्यूनिटी ग्रुप के baseline-browser-mapping मॉड्यूल का इस्तेमाल करके, ब्राउज़र वर्शन को बेसलाइन टारगेट पर मैप किया जा सकता है. इस मॉड्यूल का इस्तेमाल, सर्वर-साइड JavaScript एनवायरमेंट में किया जा सकता है. इसके अलावा, JSON या CSV फ़ाइलों को डाउनलोड करके भी इसका इस्तेमाल किया जा सकता है. ये फ़ाइलें, हर दिन रिपॉज़िटरी से रीफ़्रेश होती हैं.

इस डेटा में, मुख्य बेसलाइन ब्राउज़र सेट के साथ-साथ, Samsung Internet, Opera, UC Browser, और Android Webview जैसे डाउनस्ट्रीम ब्राउज़र के लिए भी मैपिंग शामिल हैं.

जानें कि आपके बेसलाइन टारगेट में सुविधाएं काम करती हैं या नहीं

बेसलाइन की जानकारी अब ज़्यादातर MDN और Can I Use पेजों पर उपलब्ध है. इसे वेब प्लैटफ़ॉर्म डैशबोर्ड पर भी देखा जा सकता है. साथ ही, web.dev और CSS Tricks के लेखों में भी यह जानकारी मिल सकती है. हालांकि, इसके लिए आपको सहायता टीम से संपर्क करना होगा. कोड लिखते समय, IDE में बेसलाइन की जानकारी दिखना और इस्तेमाल किए जा रहे अन्य सभी टूल में यह जानकारी दिखना, बहुत ज़्यादा मददगार होगा.

हमें यह बताते हुए खुशी हो रही है कि अब कई अहम टूल में, Baseline की सुविधा पहले से मौजूद है या इसे आसानी से इंटिग्रेट किया जा सकता है.

browserslist-config-baseline

Babel और PostCSS जैसे कई टूल, browserslist का इस्तेमाल करके यह तय करते हैं कि किन ब्राउज़र पर काम करना है.

WebDX CG और कम्यूनिटी के सदस्यों के साथ मिलकर, Chrome टीम ने browserslist-config-baseline नाम का एक नया टूल रिलीज़ करने में मदद की. इससे, ब्राउज़र की सूची के टारगेट को बेसलाइन की शर्तों में कॉन्फ़िगर किया जा सकता है. जैसे, ज़्यादातर जगहों पर उपलब्ध या बेसलाइन के साल.

इसकी मदद से, अब browserslist टारगेट करने वाले किसी भी टूल को बेसलाइन के हिसाब से दिखाया जा सकता है.

ज़्यादा जानने के लिए, browserslist के साथ बेसलाइन का इस्तेमाल करना लेख पढ़ें.

लिंटर में बेसलाइन—ESLint और Stylelint

हाल ही में, लिंटर स्पेस में कुछ नए टूल की मदद से, लिंटर के साथ Baseline का इस्तेमाल करना संभव हो गया है. इनमें सबसे पहले, CSS के लिए ESLint शामिल है.

बेसलाइन ESLint में use-baseline नियम है. इसे अपने पसंदीदा आधार टारगेट पर सेट किया जा सकता है. इससे, टारगेट से नई सुविधाओं का इस्तेमाल करने पर आपको चेतावनी मिलेगी. आपके पास इन चेतावनियों को ठीक करने का विकल्प होता है: उस सुविधा को प्राइमिटिव से बदलकर या लिंटर चेतावनी को दबाकर. यह एकदम सही समाधान है, जब आपको पता हो कि किसी नई सुविधा का इस्तेमाल सुरक्षित तरीके से किया जा रहा है. उदाहरण के लिए, अगर यह प्रगतिशील बेहतर बनाने की सुविधा है.

डिफ़ॉल्ट रूप से, अगर @supports ब्लॉक में नई सुविधाओं का इस्तेमाल किया जाता है, तो ESLint चेतावनी नहीं देगा. इसकी वजह यह है कि जिन ब्राउज़र पर ये सुविधाएं काम नहीं करतीं वे इनका आकलन नहीं कर पाएंगे.

एचटीएमएल को लिंट करने के लिए, html-eslint नाम का एक कम्यूनिटी प्लग इन भी उपलब्ध है.

Stylelint, stylelint-plugin-use-baseline नाम के प्लग इन के साथ आधिकारिक तौर पर काम करता है. यह नियम, सीएसएस के लिए ESLint नियम की तरह ही काम करता है. हालांकि, यह Stylelint पर चलता है.

कई लिंटर में IDE प्लग इन भी होते हैं. इसलिए, कोडिंग के दौरान, स्क्विगली अंडरलाइन की मदद से, आपको बेसलाइन स्टेटस के बारे में तुरंत सुझाव मिल सकते हैं.

VS Code और JetBrains WebStorm में बेसलाइन

कई आईडीई में, अपने एडिटर में किसी सुविधा पर कर्सर घुमाकर, उस पर काम करने वाले ब्राउज़र वर्शन की सूची देखने की सुविधा लंबे समय से उपलब्ध है.

हालांकि, यह समझना मुश्किल हो सकता है कि इस सुविधा का इस्तेमाल करना वाकई सुरक्षित है या नहीं. इसके लिए, आपको यह पता लगाना होगा कि इस सूची में कोई मुख्य ब्राउज़र मौजूद है या नहीं और उस ब्राउज़र का वर्शन कितना नया है.

इस समस्या को ठीक करने के लिए, हमने सबसे लोकप्रिय IDE, VS Code के साथ साझेदारी की है. VS Code का इस्तेमाल लाखों वेब डेवलपर करते हैं. इससे, बेसलाइन डेटा को सीधे इन होवरकार्ड में इंटिग्रेट किया जा सकेगा.

अब किसी सुविधा पर कर्सर घुमाने पर, आपको यह पता चलेगा कि उस सुविधा को बेसलाइन माना गया है या नहीं और कितने समय तक. इसके अलावा, यह भी पता चलेगा कि क्या कोई ऐसा मुख्य ब्राउज़र है जो अब तक इस सुविधा को पूरी तरह से लागू नहीं कर पाया है.

इन सुविधाओं में सीएसएस प्रॉपर्टी, एचटीएमएल एलिमेंट, और एचटीएमएल एट्रिब्यूट शामिल हैं. ज़्यादा जानने के लिए, Visual Studio Code में अब बेसलाइन की सुविधा काम करती है लेख पढ़ें.

इस इंटिग्रेशन का मतलब है कि VS Code पर आधारित किसी भी IDE को इन होवरकार्ड से फ़ायदा मिलेगा.

साथ ही, हमें यह भी बताते हुए खुशी हो रही है कि JetBrains, अपने WebStorm JavaScript और TypeScript IDE में कर्सर घुमाने पर दिखने वाले कार्ड की सुविधा लागू कर रहा है.

वेब पहले से ज़्यादा तेज़ी से बेहतर हो रहा है

हमें उम्मीद है कि Baseline की मदद से, आपको इस बात का फ़ायदा मिलेगा कि इंटरऑपरेबल वेब पहले से ज़्यादा तेज़ी से बेहतर हो रहा है.

वेब प्लैटफ़ॉर्म डैशबोर्ड का इस्तेमाल करके, उन सभी सुविधाओं को देखा जा सकता है जो पिछले बारह महीनों में, Google I/O 2024 के बाद से उपलब्ध हैं.

साथ ही, ऐसी कई सुविधाएं भी हैं जो जल्द ही Baseline के तौर पर उपलब्ध होंगी. ऐसा इसलिए, क्योंकि इन्हें Interop 2025 प्रोजेक्ट में शामिल किया गया है. इसमें शामिल सभी सुविधाओं के बारे में जानने के लिए, Interop2025: वेब प्लैटफ़ॉर्म को बेहतर बनाने के लिए एक और साल लेख पढ़ें.

तिरछे लिखने के मोड

हमने पहले ही एक सुविधा को बेसलाइन के तौर पर उपलब्ध देखा है. यह सुविधा, सीएसएस writing-mode प्रॉपर्टी के लिए sideways-rl और sideways-lr वैल्यू है. अगर सिर्फ़ लेआउट के लिए वर्टिकल राइटिंग मोड का इस्तेमाल किया जा रहा है, तो हो सकता है कि आपको साइडवर्ड वैल्यू का इस्तेमाल करना पड़े.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

ऐंकर की पोज़िशन

एंकर की पोज़िशनिंग, Chrome 125 में उपलब्ध है. इसकी मदद से, किसी एलिमेंट की पोज़िशन को ऐंकर से जोड़ा जा सकता है. उदाहरण के लिए, बटन की मदद से टूलटिप खोलने पर.

इसे अब Interop 2025 में शामिल किया गया है. इसलिए, हमें उम्मीद है कि यह इस साल Baseline में शामिल हो जाएगा.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी: एलसीपी और आईएनपी

LCP API

इवेंट टाइमिंग एपीआई (INP के लिए)

वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी की मदद से, अपनी साइट के अनुभव का आकलन किया जा सकता है. साथ ही, सुधार के अवसरों की पहचान की जा सकती है. वेब विटल्स इनिशिएटिव का मकसद, वेबसाइट की परफ़ॉर्मेंस को बेहतर बनाने के लिए, मेट्रिक को आसान बनाना है. इससे साइटों को सबसे ज़रूरी मेट्रिक, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर फ़ोकस करने में मदद मिलती है.

इंटरऑपरेबिलिटी 2025 में, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) और पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी) मेट्रिक शामिल हैं. इसके लिए, सभी ब्राउज़र में LargestContentfulPaint एपीआई और इवेंट टाइमिंग एपीआई लागू किया गया है.

<details> एलिमेंट में किए गए सुधार

<details> एलिमेंट, पहले से ही बेसलाइन के तौर पर सभी के लिए उपलब्ध है. इसे Interop 2025 में शामिल किया गया है, क्योंकि इसमें कई सुविधाएं हैं जो <details> वाले डिसक्लोज़र विजेट को ज़्यादा काम का बनाती हैं.

<details> एलिमेंट में एक <summary> एलिमेंट होता है. यह वह हिस्सा होता है जो <details> एलिमेंट के छोटा होने पर पेज पर दिखता है. <summary> के बाहर, <details> एलिमेंट का कॉन्टेंट होता है. यह तब तक छिपा रहता है, जब तक उपयोगकर्ता खास जानकारी पर क्लिक नहीं करता.

Interop 2025 के दौरान, display के बजाय content-visibility का इस्तेमाल करके कॉन्टेंट को छिपाने की सुविधा को इंटरऑपरेबल बनाया जा रहा है. इसका मतलब है कि अगर कॉन्टेंट को बड़ा नहीं किया जाता है, तो वह रेंडर नहीं होगा.

::marker स्यूडो-एलिमेंट भी इंटरऑपरेबिलिटी 2025 प्रोग्राम का हिस्सा है. ::marker स्यूडो-एलिमेंट की मदद से, <summary> एलिमेंट के डिसक्लोज़र ट्राएंगल को स्टाइल किया जा सकता है.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

इसके बाद, एक और स्यूडो-एलिमेंट—::details-content.

::details-content, कॉन्टेंट दिखाता है. यह जानकारी वाले एलिमेंट का वह हिस्सा है जो बड़ा और छोटा होता है. साथ ही, इसे स्टाइल किया जा सकता है.

[open]::details-content {
  border: 5px dashed hotpink;
}

इसमें कुछ और भी बेहतर सुधार किए गए हैं. जैसे, पेज में खोजने की सुविधा से मैच होने वाले शब्दों के साथ <details> एलिमेंट अपने-आप बड़ा हो जाना और एचटीएमएल hidden एट्रिब्यूट की until-found वैल्यू को 'नया वर्शन उपलब्ध है' के बेसलाइन पर ले जाना. इससे किसी एलिमेंट को तब तक छिपा दिया जाता है, जब तक कि उसे ब्राउज़र की 'पेज में खोजें' सुविधा का इस्तेमाल करके ढूंढा नहीं जाता या सीधे तौर पर यूआरएल फ़्रैगमेंट का इस्तेमाल करके उस पर नहीं पहुंचा जाता.

सीएसएस @scope

सीएसएस @scope नियम की मदद से, अपने सेलेक्टर की पहुंच को सीमित किया जा सकता है. @scope के साथ स्कोपिंग रूट सेट करने पर, at-rule में नेस्ट किए गए स्टाइल नियम सिर्फ़ उस डीओएम ट्री पर लागू होते हैं.

उदाहरण के लिए, अगर आपको .card क्लास वाले किसी एलिमेंट में सिर्फ़ <img> एलिमेंट को टारगेट करना है, तो .card स्कोपिंग रूट बन जाएगा.

@scope (.card) {
    img {
        border-color: green;
    }
}

ज़्यादा जानने के लिए, सीएसएस @scope at-rule की मदद से, अपने सिलेक्टर की पहुंच को सीमित करना लेख पढ़ें.

scrollend

scrollend एक ऐसी सुविधा है जिससे स्क्रोल करने के इंटरफ़ेस को बेहतर बनाने के साथ-साथ, कॉन्टेंट को समझने में भी आसानी होती है. scrollend इवेंट के बिना, यह पता लगाने का कोई भरोसेमंद तरीका नहीं है कि स्क्रॉल पूरा हो गया है.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend इवेंट की मदद से, ब्राउज़र आपके लिए यह मुश्किल आकलन करता है.

document.onscrollend = event => {…}

Scrollend, एक नया JavaScript इवेंट में ज़्यादा उदाहरण देखें.

एक ही दस्तावेज़ के व्यू के बीच ट्रांज़िशन

आखिरी बात, व्यू ट्रांज़िशन, Interop 2025 का हिस्सा हैं. इसमें एक ही दस्तावेज़ के व्यू ट्रांज़िशन शामिल हैं. इसलिए, सिंगल-पेज-ऐप्लिकेशन के लिए और व्यू ट्रांज़िशन क्लास के लिए भी ये काम किए जाते हैं.

Interop 2025 डैशबोर्ड पर जाकर, यह देखें कि साल के साथ-साथ प्रोजेक्ट कैसे आगे बढ़ रहा है.

Interop 2025 में शामिल सुविधाएं ही इस साल के बेसलाइन का हिस्सा नहीं होंगी. हालांकि, इन सुविधाओं को प्रोजेक्ट में शामिल करने से हमें यह पता चलता है कि इन सुविधाओं को प्राथमिकता दी जा रही है और ये जल्द ही उपलब्ध होंगी.

हम बस अभी शुरुआत कर रहे हैं

Baseline के लिए यह साल काफ़ी अहम रहा है. हमने पिछले साल किए गए एलान के आधार पर, बहुत कुछ हासिल किया है. अब हम वेब की सुविधाओं के डेटा को बैकफ़िल कर चुके हैं. इससे डेवलपर के लिए कई नए अवसर खुले हैं और डेवलपर के लिए टूल बनाने की अनुमति मिली है. हमने अभी-अभी इस प्रोग्राम की शुरुआत की है. अगर आपके पास ऐसा कोई प्रॉडक्ट या ओपन सोर्स टूल है जिसे इस डेटा को शामिल करने से फ़ायदा होगा, तो हमें बताएं.

web.dev पर नज़र बनाए रखें. हम ट्यूटोरियल के साथ-साथ, नए टूल के बारे में सूचनाएं पब्लिश करते रहेंगे. इससे आपको वेब की सभी सुविधाओं का फ़ायदा पाने में मदद मिलेगी.